﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PhotoGallery.Models.Model.Home.HomeDetailModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    重庆市公安图片管理系统--图片管理
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="list-right">
        <table width="100%" cellspacing="5" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td valign="top" class="s-box" id="list-left" style="width: 320px">
                        <div class="head">
                            文件目录</div>
                        <div class="con">
                            <div style="height: 200px;">
                                根目录
                                <div id="tree" class="demo">
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="con-box">
                            <div class="head">
                                <h2>
                                    文件管理
                                </h2>
                            </div>
                            <div class="con">
                                <div class="box attributes">
                                    <div class="attr-title">
                                        <span>文件信息</span>
                                    </div>
                                    <ul class="detail-info-list clearfix">
                                        <li><span>文件夹名称：</span><%: Model.PicNode.Name %></li>
                                        <li><span>所含文件：</span><%: Model.FileInfos.Count %>(张)</li>
                                        <li><span>子文件夹：</span><%: Model.DictionaryInfos.Count %>(个)</li>
                                        <li><span>关键字：</span><%: Model.FolderDesc!=null ?Model.FolderDesc.KeyWord:string.Empty %></li>
                                        <li><span>摄影师：</span><%: Model.FolderDesc != null ? Model.FolderDesc.Photographer : string.Empty%></li>
                                        <li><span>起止日期：</span><%: Model.FolderDesc!=null && Model.FolderDesc.StartDate!=null ?Model.FolderDesc.StartDate.ToString("yyyy年MM月dd日"):string.Empty%>-<%: Model.FolderDesc != null && Model.FolderDesc.EndDate != null ? Model.FolderDesc.EndDate.ToString("yyyy年MM月dd日") : string.Empty%></li>
                                        <li><span>参与领导：</span><%: Model.FolderDesc!=null ? Model.FolderDesc.Leader:string.Empty%></li>
                                        <li><span>其它领导：</span><%: Model.FolderDesc!=null?Model.FolderDesc.OtherLeader:string.Empty%></li>
                                        <li><span>来宾：</span><%: Model.FolderDesc!=null?Model.FolderDesc.Guest:string.Empty%></li>
                                        <li><span>市内地点：</span><%: Model.FolderDesc!=null?Model.FolderDesc.InnerLocation:string.Empty%></li>
                                        <li><span>市外地点：</span><%: Model.FolderDesc!=null?Model.FolderDesc.OuterLocation:string.Empty%></li>
                                        <li><span>所属事件：</span><%: Model.FolderDesc!=null && Model.FolderDesc.EventInfoEntity != null ? Model.FolderDesc.EventInfoEntity.Name : string.Empty%></li>
                                        <li><span>事件其它：</span><%: Model.FolderDesc!=null?Model.FolderDesc.EventDesc:string.Empty%></li>
                                    </ul>
                                </div>
                            </div>
                            <!--图片展现 -->
                            <div class="con">
                                <div id="content" class="box">
                                    <p>
                                        <% foreach (var item in Model.FileInfos)
                                           {  %>
                                        <a rel="example_group" href="<%: Url.Action("Image") %>/<%:Model.PicNode.Id %>?name=<%:item.Name %>&type=big"
                                            title="<%:item.Name %>">
                                            <img alt="" src="<%: Url.Action("Image") %>/<%:Model.PicNode.Id %>?name=<%:item.Name %>&type=small" /></a>
                                        <a id="<%:item.Name %>" name="gallery_delete">删除</a> <a name="gallery_down" href="<%:Url.Action("DownLoad") %>/<%:Model.PicNode.Id %>?name=<%:item.Name %>">
                                            下载</a>
                                        <% } %>
                                    </p>
                                </div>
                            </div>
                            <!-- 图片上传 -->
                            <div class="con">
                                <div class="box">
                                    <label for="unitImage">
                                        单位图片：
                                    </label>
                                    <div id="filecon" style="left: 125px; position: relative; top: -15px;">
                                        <input type="file" id="image" name="image" />
                                        <input type="button" id="btnUpload" name="btnUpload" value="提交" class="button" />
                                    </div>
                                    <div id="imageUplaoding" style="display: none;">
                                        <img src="../../Content/images/ajax-loader.gif" alt="上传..." /><span></span>
                                    </div>
                                    <div id="returninfo" style="display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="StyleContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript" src="/Scripts/tree/jquery.jstree.js"></script>
    <script type="text/javascript" src="/Scripts/tree/jquery.hotkeys.js"></script>
    <script type="text/javascript" src="/Scripts/tree/jquery.cookie.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.MultiFile.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.ajaxfileupload.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("#tree").jstree({
                // the list of plugins to include

                "plugins": ["themes", "json_data", "ui", "crrm", "dnd", "cookies", "search", "types", "hotkeys", "contextmenu","search"],
                // Plugin configuration

                // I usually configure the plugin that handles the data first - in this case JSON as it is most common
                "json_data": {
                    // I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
                    // All the options are the same as jQuery's except for `data` which CAN (not should) be a function
                    "ajax": {
                        // the URL to fetch the data
                        "url": '<%: Url.Action("Operation") %>',
                        // this function is executed in the instance's scope (this refers to the tree instance)
                        // the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
                        "data": function (n) {
                            // the result is fed to the AJAX request `data` option
                            return {
                                "operation": "get_children",
                                "id": n.attr ? n.attr("id").replace("node_", "") : null
                            };
                        }
                    }
                },
                "themes": {
                    "theme": "apple"
                },
                "types": {
                    // I set both options to -2, as I do not need depth and children count checking
                    // Those two checks may slow jstree a lot, so use only when needed
                    "max_depth": -2,
                    "max_children": -2,
                    // I want only `drive` nodes to be root nodes 
                    // This will prevent moving or creating any other type as a root node
                    "valid_children": ["drive"],
                    "types": {
                        // The default type
                        "default": {
                            // I want this type to have no children (so only leaf nodes)
                            // In my case - those are files
                            //"valid_children": "none",
                            // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                            "icon": {
                            //"image" : "./file.png"
                        }
                    },
                    // The `folder` type
                    "folder": {
                        // can have files and other folders inside of it, but NOT `drive` nodes
                        "valid_children": ["default", "folder"],
                        "icon": {
                        //"image" : "./folder.png"
                    }
                },
                // The `drive` nodes 
                "drive": {
                    // can have files and folders inside, but NOT other `drive` nodes
                    "valid_children": ["default", "folder"],
                    "icon": {
                    //"image" : "./root.png"
                },
                // those options prevent the functions with the same name to be used on the `drive` type nodes
                // internally the `before` event is used
                "start_drag": false,
                "move_node": false,
                "delete_node": false,
                "remove": false
            }
        }
    },
    // For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

    // the UI plugin - it handles selecting/deselecting/hovering nodes
    "ui": {
        // this makes the node with ID node_4 selected onload
        "initially_select": ["node_4"]
    },
    // the core plugin - not many options here
    "core": {
        // just open those two nodes up
        // as this is an AJAX enabled tree, both will be downloaded from the server
        "initially_open": ["node_2", "node_3"]
    }
})
        .bind("click", function (e, data) {
            if($(e.currentTarget).is("a")){  
                window.location.href="<%: Url.Action("Detail")%>?id="+$(e.currentTarget).parent().attr("id").replace("node_","");
                return false;
            }
        })
        .bind("view.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Detail")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            return false;
        })        
        .bind("descript.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Edit")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            
            return false;
        })
        .bind("searcher.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Search")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            return false;
        })
		.bind("create.jstree", function (e, data) {
		    $.post(
				'<%: Url.Action("Operation") %>',
				{
					"operation": "create_node",
					"parentid": data.rslt.parent.attr("id").replace("node_", ""),
					"position": data.rslt.position,
					"name": data.rslt.name,
					"type": data.rslt.obj.attr("rel")
				},
				function (r) {
					if (r.status) {
						$(data.rslt.obj).attr("id", "node_" + r.id);
					}
					else {
						$.jstree.rollback(data.rlbk);
					}
                    if (r.success) {
                        cy.ui.showResult({ content: r.message, disappear: 5000 });
                    } else {
                        cy.ui.showResult({ content: r.message, disappear: 5000, className: 'cy-ui-results error' });
                    }

                    div.find("a").click(function(e){
                        e.enablePropagation();
                    });
				}
			);
            
		})
		.bind("remove.jstree", function (e, data) {
		    data.rslt.obj.each(function () {
		        $.ajax({
		            async: false,
		            type: 'POST',
		            url: '<%: Url.Action("Operation") %>',
		            data: {
		                "operation": "remove_node",
		                "id": this.id.replace("node_", "")
		            },
		            success: function (r) {
		                if (!r.status) {
		                    data.inst.refresh();
		                }
                        if (r.success) {
                            cy.ui.showResult({ content: r.message, disappear: 5000 });
                        } else {
                            cy.ui.showResult({ content: r.message, disappear: 5000, className: 'cy-ui-results error' });
                        }
		            }
		        });
		    });
		})
		.bind("rename.jstree", function (e, data) {
		    $.post(
				'<%: Url.Action("Operation") %>',
				{
				    "operation": "rename_node",
				    "id": data.rslt.obj.attr("id").replace("node_", ""),
				    "name": data.rslt.new_name
				},
				function (r) {
				    if (!r.status) {
				        $.jstree.rollback(data.rlbk);
				    }
                    if (r.success) {
                        cy.ui.showResult({ content: r.message, disappear: 5000 });
                    } else {
                        cy.ui.showResult({ content: r.message, disappear: 5000, className: 'cy-ui-results error' });
                    }
				}
			);
		})
		.bind("move_node.jstree", function (e, data) {
		    data.rslt.o.each(function (i) {
		        $.ajax({
		            async: false,
		            type: 'POST',
		            url: '<%: Url.Action("Operation") %>',
		            data: {
		                "operation": "move_node",
		                "id": $(this).attr("id").replace("node_", ""),
		                "ref": data.rslt.np.attr("id").replace("node_", ""),
		                "position": data.rslt.cp + i,
		                "title": data.rslt.name,
		                "copy": data.rslt.cy ? 1 : 0
		            },
		            success: function (r) {
		                if (!r.status) {
		                    $.jstree.rollback(data.rlbk);
		                }
		                else {
		                    $(data.rslt.oc).attr("id", "node_" + r.id);
		                    if (data.rslt.cy && $(data.rslt.oc).children("UL").length) {
		                        data.inst.refresh(data.inst._get_parent(data.rslt.oc));
		                    }
		                }
		                $("#analyze").click();
		            }
		        });
		    });
		});

});

$(function () {
    $("#tree li").attr("class", "jstree-closed");


    // 文件上传

    //多文件

//    $('#image').MultiFile({
//        accept: 'jpg|bmp|jpeg|png',
//        max: 10,
//        STRING: {
//            remove: '删除',
//            selected: 'Selecionado: $file',
//            denied: '不支持该类型文件上传, $ext!',
//            duplicate: '该文件已经选择:\n$file!'
//        }
//    });

    $("#btnUpload").click(imageUploadEventHandler);

    function imageUploadEventHandler(e){
        var img = $("input[id='image'][type='file']");
        var reg = /.[jpe?g|gif|bmp|png]$/g; 
        $("#imageUplaoding").ajaxStart(function() {
            $(this).show();
        }).ajaxComplete(function() {
            $(this).hide();
        });

        //使用循环      
       
        ImageUploading(e,img);   
       

     
       
    }

    function ImageUploading(e,img){
           
       $.ajaxFileUpload({
            url: '<%: Url.Action("Upload") %>/<%:Model.PicNode.Id %>',
            secureuri: false,
            fileElementId: $(img).attr("id"),
            dataType: 'html',
            success: function(data, status) {
                try {
                   // data = eval('(' + $(data).text() + ')');
                    if (data.success) {
                        cy.ui.showResult({ content: data.message, disappear: 5000 });
                    } else {
                        cy.ui.showResult({ content: data.message, disappear: 5000, className: 'cy-ui-results error' });
                    }
                }
                catch (e) {

                }
                if (data.success) {
                    var imghref = "<div><img id='imgEdit' src=";
                    imghref += "'<%: Url.Action("Image") %>/<%:Model.PicNode.Id %>?name=" + data.imgPath+ "&type=small";
                    imghref += " '/>";
                    imghref +="<a href='javascript:;' name='imgaction'>删除</a>";
                    imghref += "<input type='text' name='imgpath' value='" + data.imgPath + "' style='display:none;' />";
                    imghref += "<input type='text' name='imgname' value='" + data.name + "' style='display:none;'/></div>";
                    $("#returninfo").append(imghref);
                    $("#returninfo").show();
                    $("a[name='imgaction']").click(function() {
                        var path = $(this).parent().find("input[name='imgpath']").val();
                        var imgname = $(this).parent().find("input[name='imgname']").val();
                        var that = this;
                        if (path != null && path != 'undefined' && name != null && name != 'undefined') {
                            $.ajax({
                                type: 'post',
                                url: '<%: Url.Action("Delete") %>/<%:Model.PicNode.Id %>',
                                data: {
                                    name: imgname
                                },
                                dataType: 'json',
                                success: function(data, textStatus) {
                                    $(that).parent().remove();
                                    if (data.success) {
                                        cy.ui.showResult({ content: data.message, disappear: 5000 });
                                    } else {
                                        cy.ui.showResult({ content: data.message, disappear: 5000, className: 'cy-ui-results error' });
                                    }
                                },
                                error: function(data, status, e) {

                                }
                            });
                        }
                    });
                    
                }
                else {
                    $("#returninfo").html(data.msg);
                    $("#filecon").show();
                }

            },
            error: function(data, status, e) {
                $("#returninfo").html(data.msg);
                $("#filecon").show();
            }
        });
    }

    



})
    </script>
    <link rel="stylesheet" type="text/css" href="/Scripts/fancybox/jquery.fancybox-1.3.4.css"
        media="screen" />
    <style type="text/css">
        #content
        {
            width: 600px;
            margin: 0px auto 0 auto;
            padding: 0 60px 30px 60px;
            border: solid 1px #cbcbcb;
            background: #fafafa;
            -moz-box-shadow: 0px 0px 10px #cbcbcb;
            -webkit-box-shadow: 0px 0px 10px #cbcbcb;
        }
    </style>
    <script type="text/javascript" src="/Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="/Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("a[rel=example_group]").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });


            $("a[name='gallery_delete']").click(function () {
                var imgname = $(this).attr("id");
                var that = this;
                $.ajax({
                    type: 'post',
                    url: '<%: Url.Action("Delete") %>/<%:Model.PicNode.Id %>',
                    data: {
                        name: imgname
                    },
                    dataType: 'json',
                    success: function (data, textStatus) {
                        $(that).prev("a").remove();
                        $(that).next("a").remove();
                        $(that).remove();
                        if (data.success) {
                            cy.ui.showResult({ content: data.message, disappear: 5000 });
                        } else {
                            cy.ui.showResult({ content: data.message, disappear: 5000, className: 'cy-ui-results error' });
                        }

                    },
                    error: function (data, status, e) {

                    }
                });
            });
        });
        
    </script>
</asp:Content>
